<script setup>

const model = defineModel({ type: Boolean })

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  submitText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  onSubmit: {
    type: Function,
  },
  onClose: {
    type: Function,
  },
  showSubmit: {
    type: Boolean,
    default: false
  },
  showClose: {
    type: Boolean,
    default: false
  }

})

const emit = defineEmits(['close', 'submit'])


const handleClose = async () => {
  if (typeof props.onClose === 'function') {
    await props.onClose()
  } else {
    closeDialog()
    emit('close')
  }
}

const handleSubmit = async () => {
  if (typeof props.onSubmit === 'function') {
    await props.onSubmit()
  } else {
    closeDialog()
    emit('submit')
  }
}

const closeDialog = () => {
  model.value = false
}

defineExpose({ closeDialog })

</script>

<template>
  <el-dialog v-model="model" v-bind="$attrs" :before-close="handleClose" :show-close="false">
    <template #header>
      <div :class="$slots['toolbar-tools'] ? 'flex justify-between' : 'flex justify-center'">
        <div class="text-center font-bold"> {{ title }} </div>
        <slot name="toolbar-tools" />
      </div>
    </template>
    <slot></slot>
    <template #footer>
      <slot name="footer">
        <div class="flex justify-end gap-2" v-if="!showSubmit && !showClose">
          <el-button type="primary" @click="handleSubmit" v-if="!showSubmit">{{ submitText }}</el-button>
          <el-button @click="handleClose" v-if="!showClose">{{ cancelText }}</el-button>
        </div>
      </slot>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>